---
import { SITE } from "@config";
import Hr from "./Hr.astro";
import LinkButton from "./LinkButton.astro";

export interface Props {
  activeNav?: "posts" | "tags" | "about" | "search" |"fantastic";
}
const { activeNav } = Astro.props;
---

<header id="page-header">
  <a id="skip-to-content" href="#main-content">Skip to content</a>
  <div class="nav-container">
    <div class="top-nav-wrap">
      <a href=`${import.meta.env.BASE_URL}/` class="logo">{SITE.title}</a>
      <nav id="nav-menu">
        <ul id="menu-items" class="display-none flex">
          <li>
            <a
              href=`${import.meta.env.BASE_URL}/posts`
              class={activeNav === "posts" ? "active" : ""}
              data-te-toggle="tooltip"
              data-te-placement="left"
              data-te-ripple-init
              data-te-ripple-color="dark"
              data-te-html="true"
              title="<em>ctrl</em> + <em>shift</em> + <em>k</em>"
            >
              博客
            </a>
          </li>
          <li>
            <a
              href=`${import.meta.env.BASE_URL}/tags`
              class={activeNav === "tags" ? "active" : ""}
            >
              标签
            </a>
          </li>
          <li>
            <a
              href=`${import.meta.env.BASE_URL}/fantastic`
              class={activeNav === "fantastic" ? "active" : ""}
            >
              单页
            </a>
          </li>
          <li>
            <LinkButton
              href="/search"
              className={`focus-outline p-3 p-1 ${
                activeNav === "search" ? "active" : ""
              }`}
              ariaLabel="search"
              title="Search"
              
            >
              <svg xmlns="http://www.w3.org/2000/svg" class="scale-100"
                ><path
                  d="M19.023 16.977a35.13 35.13 0 0 1-1.367-1.384c-.372-.378-.596-.653-.596-.653l-2.8-1.337A6.962 6.962 0 0 0 16 9c0-3.859-3.14-7-7-7S2 5.141 2 9s3.14 7 7 7c1.763 0 3.37-.66 4.603-1.739l1.337 2.8s.275.224.653.596c.387.363.896.854 1.384 1.367l1.358 1.392.604.646 2.121-2.121-.646-.604c-.379-.372-.885-.866-1.391-1.36zM9 14c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5z"
                ></path>
              </svg>
            </LinkButton>
          </li>
          <!-- <li>
            {SITE.lightAndDarkMode && <ToggleButton />}
          </li> -->
        </ul>
      </nav>
    </div>
  </div>
  <Hr />
</header>

<style>
  #skip-to-content {
    @apply absolute -top-full left-16 z-50 bg-skin-accent px-3 py-2 text-skin-inverted transition-all focus:top-4;
  }
  .nav-container {
    @apply mx-auto flex max-w-[100vw] flex-col items-center justify-between;
  }
  .top-nav-wrap {
    @apply relative flex w-full items-start justify-between p-4 items-center py-8;
  }
  .logo {
    @apply absolute py-1 text-xl font-semibold  text-2xl;
  }
  nav {
    @apply flex w-full flex-col items-end bg-skin-fill ml-2 flex-row justify-end space-x-4 py-0;
  }
  nav ul {
    @apply mt-4 grid w-44 grid-cols-2 grid-rows-4 gap-x-2 gap-y-2 ml-0 mt-0 w-auto gap-x-5 gap-y-0;
  }
  nav ul li {
    @apply col-span-2 flex items-center justify-center;
  }
  nav ul li a {
    @apply w-full px-4 py-3 text-center font-medium hover:text-skin-accent my-0 px-2 py-1;
  }
  nav ul li:nth-child(4) a {
    @apply w-auto;
  }
  nav ul li:nth-child(5),
  nav ul li:nth-child(6) {
    @apply col-span-1;
  }
  nav a.active {
    @apply underline decoration-wavy decoration-2 underline-offset-4;
  }
  nav a.active svg {
    @apply fill-skin-accent;
  }

  nav button {
    @apply p-1;
  }
  nav button svg {
    @apply h-6 w-6 fill-skin-base hover:fill-skin-accent;
  }
  #theme-btn {
    @apply p-3 p-1;
  }
  #theme-btn svg {
    @apply scale-125 hover:rotate-12 scale-100;
  }

  .menu-icon line {
    @apply transition-opacity duration-75 ease-in-out;
  }
  .menu-icon .close {
    opacity: 0;
  }
  .menu-icon.is-active .line {
    @apply opacity-0;
  }
  .menu-icon.is-active .close {
    @apply opacity-100;
  }
</style>
